import './zhuce.scss'
import React, { Component } from 'react';
import { NavBar, Form, Input, Button, Toast } from 'antd-mobile'
import * as service from '../../api'
import { BellOutline } from 'antd-mobile-icons'

class zhuce extends Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            setpassword:'',
            yanzhengma:'',
            btntext:'发送验证码',
            btnbool:false,
        }
    }
    onBack() {
        this.props.history.goBack()
    }
    checkMobile = (_, value) => {
        this.setState({
            username:value
        })       
        if (/^1[3-9]\d{9}$/.test(value)) {         
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('输入正确的手机号!'))
        }
    }
    checkPassword = (_, value) => {
        this.setState({
            password:value
        })
        if (/^\d{6,}$/.test(value)) {
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('输入正确的密码!'))
        }
    }
    checkSetPassword = (_, value) => {
        this.setState({
            setpassword:value
        })
        if (value) {
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('请确认密码!'))
        }
    }
    checkYanzhengma=(_, value)=>{
        this.setState({
            yanzhengma:value
        })
        if (value) {
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('请输入验证码!'))
        }
    }
   async onFinish(values) {
        // console.log(values);
        var res=await service.user_dofinishregister({tel:values.username,password:values.password})
        console.log(res);
        if(res.data.code==200){
            Toast.show({
                content: '注册成功',
                icon:'success'
              })
        }
        this.props.history.push('/login')

    }
    // 验证手机号是否注册
    async funa(){
        var res=await service.user_docheckphone({tel:this.state.username})
        // console.log(res);
        if(res.data.code=='200'){
            Toast.show({
                content: '请继续注册',
              })
        }else if(res.data.code=='10005'){
            Toast.show({
                content: '该用户已被注册',
              })
        }else{
            Toast.show({
                content: '该您当前网络不佳，请稍后再试',
              })
        }
    }
    // 确认密码
   funb(){
    if(this.state.setpassword!=''){
        if(this.state.password!=this.state.setpassword){
            Toast.show({
                content: '两次密码不一致',
              })
       }
      }
    } 
    //发送验证码
    async fasong(){
        if(!this.state.username) return
        this.setState({
            btnbool:true
        })
        
        let num=10;
        
        let setcode=setInterval(()=>{
           num-=1
           this.setState({
             btntext:`倒计时${num}秒后再次发送`
           })
           if(num==0){
            this.setState({
                 btnbool:false,
                 btntext:'发送验证码'
            })            
               clearInterval(setcode)
           }
        },1000)            
        var res=await service.user_dosendmsgcode({tel:this.state.username})
        //    console.log(res); 
        Toast.show({
            content: res.data.data,
            duration:6000,
            position:"top",
            icon:<BellOutline />
          })       
    }
    //验证验证码
    async phonecode(){
        var res=await service.user_docheckcode({tel:this.state.username,telcode:this.state.yanzhengma})
        // console.log(res);
    }
    render() {
        return (
            <div className='zhuce'>
                <NavBar onBack={this.onBack.bind(this)} style={{
                    '--height': '50px',
                    '--border-bottom': '1px #eee solid',
                }}>注册
                </NavBar>

                <div className="bottom">
                    <Form
                        layout='horizontal'
                        onFinish={this.onFinish.bind(this)}
                        footer={
                            <Button block type='submit' color='warning' size='large' shape='rounded'>
                                立即注册
                            </Button>
                        }
                    >
                        <Form.Item
                            name='username'
                            rules={[
                                { validator: this.checkMobile }
                            ]}
                        >
                            <Input placeholder='请输入手机号' onBlur={this.funa.bind(this)}/>
                        </Form.Item>

                        <Form.Item
                            name='password'
                            rules={[
                                { validator: this.checkPassword }
                            ]}
                        >
                            <Input type='password' placeholder='请设置密码' />
                        </Form.Item>

                        <Form.Item
                            name='setpassword'
                            rules={[
                                { validator: this.checkSetPassword }
                            ]}
                        >
                            <Input type='password' placeholder='请确认密码' onBlur={this.funb.bind(this)}/>
                        </Form.Item>

                        <div className="yanzheng">
                            <Form.Item
                                name='yanzhengma'
                                rules={[
                                    { validator: this.checkYanzhengma }
                                ]}
                            >
                                <Input placeholder='请输入验证码'  onBlur={this.phonecode.bind(this)}/>

                            </Form.Item>
                            <Button className='fasongyzm' disabled={this.state.btnbool}  color='warning' shape='rounded' onClick={()=>{this.fasong()}}>
                                {this.state.btntext}
                            </Button>
                        </div>

                    </Form>
                </div>
            </div>
        );
    }
}

export default zhuce;